<template>
  <div class="container">
    <input id="document" type="file" @change="handleFileSelect" />
    <div class="row">
      <div class="span8">
        <div id="output" class="well"></div>
      </div>
      <div class="span4">
        <h3>Messages</h3>
        <div id="messages"></div>
      </div>
    </div>
  </div>
</template>

<script>
import mammoth from 'mammoth'
export default {
    methods: {
        handleFileSelect(event) {
        this.readFileInputEventAsArrayBuffer(event,  (arrayBuffer) => {
            mammoth.convertToHtml({arrayBuffer: arrayBuffer})
                .then(this.displayResult)
                .done();
        });
    },

    displayResult(result) {
		console.log(result)
        document.getElementById("output").innerHTML = result.value;

        var messageHtml = result.messages.map((message) => {
            return '<li class="' + message.type + '">' + this.escapeHtml(message.message) + "</li>";
        }).join("");

        document.getElementById("messages").innerHTML = "<ul>" + messageHtml + "</ul>";
    },

    readFileInputEventAsArrayBuffer(event, callback) {
        var file = event.target.files[0];

        var reader = new FileReader();

        reader.onload = function(loadEvent) {
            var arrayBuffer = loadEvent.target.result;
            callback(arrayBuffer);
        };

        reader.readAsArrayBuffer(file);
    },

    escapeHtml(value) {
        return value
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    },
    },
};
</script>

<style lang="scss" scoped>
</style>